<template>
  <div class="app">
    <h1 class="title">hello vue~</h1>
    <h3>你好,vuejs</h3>
    <input type="text" placeholder="请输入内容">
    <hr>
    <Home />
    <hr>
    <About />
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import './assets/style/app.css'
// import About from './components/About.vue'
import Home from './components/Home.vue'
// 异步导入(会自动拆分单独的文件)
// const About = () =>import(/* webpackChunkName: "about-group" */ './components/About.vue').then(res => res.default)
// 定义异步组件
const About = defineAsyncComponent(() =>
  // 异步导入(会自动拆分单独的chunk文件), 通过魔法注释设置chunk名称
  import(/* webpackChunkName: "about-group" */'./components/About.vue')
)
export default {
  components: {
    Home, About
  },
}
</script>

<style lang="scss">
$fontColor: blue;

.app {
  .title {
    color: $fontColor;
    background-color: #eee;
  }
}
</style>